<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ plugin.displayName || plugin.name }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
      [disabled]="saveInProgress"
    ></button>
  </div>
  <div class="modal-body pb-0">
    @if (schema.headerDisplay) {
    <markdown class="plugin-md" [data]="schema.headerDisplay | interpolateMd" />
    }

    <!-- MULTIPLE CONFIG BLOCKS-->
    @if (pluginConfig.length && !schema.singular) {
    <div ngbAccordion [closeOthers]="true" (show)="blockShown($event)" (hide)="blockHidden($event)">
      @for (block of pluginConfig; track block; let i = $index) {
      <div [ngbAccordionItem]="block.__uuid__" class="card" [collapsed]="show !== block.__uuid__" [id]="block.__uuid__">
        <div ngbAccordionHeader class="card-header">
          <div class="d-flex align-items-center justify-content-between">
            <h5 class="m-0">{{ block.name }}</h5>
            <div class="d-flex align-items-center">
              @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
              <button
                class="btn btn-danger ms-2"
                (click)="removeBlock(block.__uuid__)"
                [ngbTooltip]="'form.button_delete' | translate"
                container="modal"
                placement="left"
                [openDelay]="150"
                triggers="hover"
              >
                <i class="fa fa-trash"></i>
              </button>
              }
              <button
                class="btn btn-primary ms-2 me-2"
                ngbAccordionToggle
                [ngbTooltip]="'form.button_edit' | translate"
                container="modal"
                placement="left"
                [openDelay]="150"
                triggers="hover"
              >
                <i class="fa fa-edit"></i>
              </button>
              <i
                class="fa fa-xl"
                [ngClass]="{
                  'fa-circle-check green-text': formBlocksValid[i],
                  'fa-circle-exclamation red-text': strictValidation && !formBlocksValid[i],
                  'fa-circle-exclamation orange-text': !strictValidation && !formBlocksValid[i]
                }"
                [ngbTooltip]="(formBlocksValid[i] ? 'form.label_valid' : (strictValidation ? 'form.label_invalid_strict' : 'form.label_invalid')) | translate"
                container="modal"
                placement="left"
                [openDelay]="150"
                triggers="hover"
              ></i>
            </div>
          </div>
        </div>
        <div ngbAccordionCollapse>
          <div ngbAccordionBody class="card-body">
            <app-schema-form [configSchema]="schema" [(data)]="block.config" (isValid)="onIsValid($event, i)" />
          </div>
        </div>
      </div>
      }
    </div>
    }

    <!-- SINGLE CONFIG BLOCK ONLY -->
    @if (pluginConfig.length && schema.singular) {
    <div class="card card-body">
      <app-schema-form [configSchema]="schema" [(data)]="pluginConfig[0].config" (isValid)="onIsValid($event, 0)" />
      @if (plugin.name==='homebridge-deconz') {
      <app-homebridge-deconz />
      } @if (plugin.name==='homebridge-hue') {
      <app-homebridge-hue />
      }
    </div>
    } @if (schema.footerDisplay) {
    <div class="mt-3">
      <markdown class="plugin-md" [data]="schema.footerDisplay | interpolateMd" />
    </div>
    }
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="closeModal()"
        [disabled]="saveInProgress"
      >
        {{ 'form.button_close' | translate }}
      </button>
    </div>
    <div class="text-center"></div>
    <div class="text-end d-flex align-items-center justify-content-end">
      @if (schema.singular) {
      <i
        class="fa fa-xl me-2"
        [ngClass]="{
          'fa-circle-check green-text': formIsValid,
          'fa-circle-exclamation red-text': strictValidation && !formIsValid,
          'fa-circle-exclamation orange-text': !strictValidation && !formIsValid
        }"
        [ngbTooltip]="(formIsValid ? 'form.label_valid' : (strictValidation ? 'form.label_invalid_strict' : 'form.label_invalid')) | translate"
        container="modal"
        placement="top"
        [openDelay]="150"
        triggers="hover"
      ></i>
      } @if (!schema.singular) {
      <button type="button" class="btn btn-elegant me-2" data-dismiss="modal" (click)="addBlock()">
        <i class="fa fa-plus"></i>
      </button>
      }
      <button
        type="button"
        class="btn btn-primary"
        data-bs-dismiss="modal"
        (click)="save()"
        [disabled]="saveInProgress || (!formIsValid && strictValidation)"
      >
        @if (!saveInProgress) {
        <span>{{ 'form.button_save' | translate }}</span>
        } @if (saveInProgress) {
        <i class="fas fa-spinner fa-pulse"></i>
        }
      </button>
    </div>
  </div>
</div>
